<template>
	<view class="add-bank-container full box relative">
		<form class="content-veiew">
			<view class="form-container">
				<view class="form-item">
					<text class="label">银行名称</text>
					<input v-model="formData.bankName" placeholder="请输入" class="input" />
				</view>
				<view class="form-item">
					<text class="label">真实姓名</text>
					<input v-model="formData.userName" placeholder="请输入" class="input" />
				</view>
				<view class="form-item">
					<text class="label">银行卡号</text>
					<input v-model="formData.bankNumber" placeholder="请输入" class="input" />
				</view>
			</view>
			<button form-type="submit" class="confirm-btn" @click="confirmHandle">
				<text>{{ isEdit ? '确认修改' : '确认添加' }}</text>
			</button>
		</form>
	</view>

</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['payload']),
		},
		onLoad(ev) {
			if (ev.hasOwnProperty('type')) {
				const { tempData } = this.$store.state
				uni.setNavigationBarTitle({
					title: "编辑银行卡"
				})
				if (!tempData) return this.$toast({ title: '参数错误!' }, () => {
					wx.navigateBack()
				})
				this.isEdit = true
				const { bank_card, bank_name, real_name, id } = tempData
				this.formData = {
					bankName: bank_name,
					userName: real_name,
					bankNumber: bank_card,
				}
				this.bankId = id
				this.$store.commit('setTempData', null)
			}
		},
		onShow() {
			if (this.payload === -2) {
				return this.$toast({ title: "请选择门店" }, () => {
					uni.navigateBack()
				})
			}
		},
		methods: {
			confirmHandle(ev) {
				if (this.loading) return
				this.loading = true
				uni.showLoading({
					title: '请稍等'
				})
				const { bankName, userName, bankNumber } = this.formData
				if (!bankName.length) return this.$toast({ title: '请输入银行名称' })
				if (!userName.length) return this.$toast({ title: '请输入真实姓名' })
				if (!bankNumber.length) return this.$toast({ title: '请输入银行卡号' })
				const data = {
					bank_name: bankName,
					real_name: userName,
					bank_card: bankNumber,
					bank_type: '储蓄卡',
					withdrawal_type: '银行卡',
					...this.payload,
				}
				if (this.isEdit) {
					data.bank_id = this.bankId
				}
				this.https('/store/addoreditbank', data).then(resp => {
					setTimeout(() => {
						const { code, msg } = resp
						uni.hideLoading()
						this.$toast({ title: msg, time: 2000 }, () => {
							this.loading = false
							uni.navigateBack()
						})
						if (code !== 1) return this.loading = false
						this.resetForm()
					}, 1000)
				})
			},
			resetForm() {
				this.formData = {
					bankName: '',
					userName: '',
					bankNumber: '',
				}
			},

		},
		data() {
			return {
				loading: false,
				bankId: '',
				isEdit: false,
				formData: {
					bankName: '',
					userName: '',
					bankNumber: ''
				}
			};
		}
	}
</script>

<style lang="scss" scoped>
	.add-bank-container {
		background-color: #f1f1f1;
		box-sizing: border-box;
		padding: 32rpx;

		.content-veiew {
			padding: 64rpx 32rpx;
		}

		.header-bar {
			height: 88rpx;
			background: #FFFFFF;
			width: 100%;
			position: relative;


			.chevron-left {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				left: 24rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.header-title {
				height: 48rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.9);
				line-height: 48rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.confirm-btn {
			margin-top: 64rpx;
			height: 80rpx;
			background: #00809F;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #FFF;
		}

		.form-container {
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 32rpx;
			box-sizing: border-box;
			overflow: hidden;

			.form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 34rpx;
				border-bottom: 1px solid #C9CDD4;
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
					border-bottom: 0;
					padding-bottom: 0;
				}

				.label {
					height: 44rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #1D2129;
					line-height: 44rpx;
				}

				.input {
					text-align: right;
					height: 44rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.4);
					line-height: 44rpx;
				}
			}
		}
	}
</style>